/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="preview-table__container"
         :class="{'special-height':heightFlag}">
        <!-- <sf-alert :title="dataTitle"
            size="small"
            :center="true"
            type="warning"
            :animation="false"
            oprText=""
            class="source-alert"
        >
        </sf-alert> -->
        <div class="table-data">
            <sf-grid>
                <sf-table ref="table"
                          :options="options_fix">
                    <sf-table-column
                        v-show="tableHeaderList.length>0"
                        type="index">
                        序号
                    </sf-table-column>
                    <sf-table-column
                        v-for="(item,index) in tableHeaderList"
                        :key="index"
                        :data-index="item.name"
                        :default-width="100">
                        <lang>{{ item.name }}</lang>
                    </sf-table-column>
                </sf-table>
            </sf-grid>
        </div>
        <!-- <div v-if="tableData.length===0" class="text-center">
            <lang>无预览数据</lang>
        </div> -->
    </div>
</template>
<script lang=ts>
import { Component, Vue, Prop, Ref, Watch } from 'vue-property-decorator';
import { SfTableOptions, SfTable } from '@sxf/sf-vue-component';

@Component({
    name: 'PreviewTable'
})
export default class PreviewTable extends Vue {

    @Ref() table!: SfTable<{}>

    // TODO: REMOVE ANY
    @Prop({
        type:Array,
        default:()=>[]
    }) tableData!: SafeAny[]

    @Prop({
        type:Boolean,
        default:true
    }) heightFlag!: boolean

    // TODO: REMOVE ANY
    @Prop({
        type:Array,
        default:()=>[]
    }) tableHeaderList!: SafeAny[]

    options_fix: SfTableOptions<{}> =  {
        bufferView: {
            enable:true,
            minValue:20,
            maxCache:20
        } as SafeAny, // TODO: REMOVE ANY
        selectionHide: true,
        forceFit: false,
        data:[],

        // 高度自适应
        autoHeight: false

        // 配置这个后才可以实现保持勾选状态
    }

    get dataTitle () {
        return _('共10000条待训练数据，预览仅展示前200条');
    }

    @Watch('tableData')
    tableDataChange () {
        this._tableLoadData();
    }

    _tableLoadData () {
        let table = this.table;
        /* eslint-disable */
        if (this.tableData.length > 0) {
            table && table.loadData(this.tableData);
            // 重置列宽度
            this.$nextTick(() => {
                table && table.resetColumnsWidth();
            });
        } else {
            table.loadData([]);
        }
    }
};
</script>
<style lang="less">
    .preview-table__container {
        background: #fff;
        width: 100%;
        height: calc(100% - 93px);
        overflow: auto;
        /* &.special-height{
            height: 100%;
        } */
        .table-data {
            height: calc(100% - 10px);
            .sfv-grid {
                height: 100%;
                display: flex;
                flex-direction: column;
                .sfv-table {
                    flex: 1;
                }
            }
        }

        .source-alert{
            &.sfv-alert__wrapper.sfv-alert--light.sfv-alert--warning{
                background: #FDFAF3;
                color: #884C00;
                margin: 3px 0;
                background: #FDFAF3;
                border: 1px solid rgba(173,104,0,0.08);
                border-radius: 4px;
            }
        }
    }
    @media screen and (max-width: 1366px) {
        .preview-table__container{
            height: calc(100% - 93px);
        }
    }
</style>
